<template>
  <div class="mall-head-box">
    <div class="logo">
      <img class="logo-img" src="@/assets/home/color-head.png" alt="" @click="goToIndex"/>
    </div>
    <div class="input-box">
      <el-input size="small" placeholder="请输入品名、类别、产地、供货商等搜索，例如：玉米" v-model="input2">
        <el-button slot="append" @click="handleClick">搜索</el-button>
      </el-input>
    </div>
    <div class="btn">
      <el-button size="small" plain @click="handlePublish">
        <i class="iconfont">&#xe62e;</i>资源发布
      </el-button>
      <!-- <el-button size="small" type="primary" @click="handleEntrust">委托采购</el-button> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "MallHead",
  data() {
    return {
      input2:''
    };
  },
  computed: {
    type() {
      return this.$store.state.xbsgUserInfo.type;
    },
  },
  methods: {
    goToIndex () {
      this.$router.push({ path: '/' })
    },
    handleClick() {
      this.$emit('search', this.input2)
    },
    handlePublish () {
      if (this.type === '0') {
        this.$confirm('查询到当前登陆角色为【普通用户】，无法使用发布服务功能，若需使用，你可前往个人中心认证为【个人交易商】或【企业交易商】', '提示', {
          confirmButtonText: '立即前往',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push({ path: '/individual' })
        }).catch((error) => { })
      } else {
        this.$router.push({ path: '/release' })
      }
    },
    handleEntrust () {
      if (this.type === '0') {
        this.$confirm('查询到当前登陆角色为【普通用户】，无法使用我要委托功能，若需使用，你可前往个人中心认证为【个人交易商】或【企业交易商】', '提示', {
          confirmButtonText: '立即前往',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push({ path: '/individual' })
        }).catch((error) => { })
      } else {
        this.message.error('暂无')
      }
    }
  },
};
</script>
<style scoped lang="scss">
@import "@/style/color.scss";
.mall-head-box {
  width: $bigWidth;
  padding: 30px 0;
  margin: 0 auto;
  background: #fff;
  display: flex;
  .logo {
    width: 25%;
    .logo-img {
      width: auto;
      height: 100%;
      cursor: pointer;
    }
  }
  .input-box {
    width: 50%;
    margin-left: 5%;
    ::v-deep .el-input__inner {
      border-color: $greenColor;
    }
    ::v-deep .el-input-group__append {
      background-color: $greenColor;
      color: #fff;
      border: 1px solid $greenColor;
    }
  }
  .btn {
    margin-left: auto;
    .el-button {
      background-color: $greenColor;
      color: #fff;
      border: 1px solid $greenColor;
    }
  }
  .iconfont {
    font-size: 12px;
    margin-right: 4px;
  }
}
</style>